<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6_固定定位广告条</title>
    <style>
        .top{
            height: 120px;
            background-color: #5AA4AE;
            color: #fff;
            font-size: 30px;
            position: fixed;
            top: 0;
            /* 视口 ViewPort 100vw 100vh vm视口宽度 vh视口高度 值为整数,为视口的百分比*/
            width: 100vw;/*100%的视口宽度*/

        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #fff799;
            left: 20px;
        }
        .right{
            background-color: #f35336;
            right: 20px;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aliquam iusto minima, placeat
            voluptate. Adipisci autem, delectus dolor et, facere itaque nam necessitatibus officia praesentium quas
            tempore, ut voluptas.
        </div>
        <div>At, consectetur et eum illum laudantium maiores minus natus nesciunt nisi obcaecati omnis optio pariatur
            provident quam repudiandae sit veritatis. Aliquam impedit maxime nam odio quaerat quos repellendus, sit
            tenetur.
        </div>
        <div>Animi cumque debitis ducimus, earum eius eligendi enim esse est eum explicabo fugiat harum illum ipsa nemo
            nisi numquam perferendis perspiciatis possimus quas quasi, rem repudiandae, rerum similique unde vel.
        </div>
        <div>Dolor, eos esse. A amet, dicta dolores explicabo in incidunt ipsum laborum magni modi officia optio, quis
            ratione repellat tempora veritatis voluptas, voluptatibus. Autem beatae deleniti inventore mollitia
            quisquam? Incidunt.
        </div>
        <div>Ab architecto eligendi numquam provident quaerat, quas quia quo? Odio perspiciatis quod sapiente sint
            tenetur. Accusantium aperiam doloremque iusto perferendis temporibus unde? Autem, dicta dolorem id nobis
            quas qui saepe.
        </div>
        <div>Expedita iure laborum natus nisi? Deserunt doloremque dolores doloribus eaque explicabo fuga inventore,
            ipsum laboriosam laudantium libero necessitatibus nulla optio quos reprehenderit velit voluptas voluptatem?
            Excepturi illo nobis praesentium quaerat.
        </div>
        <div>Architecto asperiores, aspernatur autem consectetur est libero obcaecati odio quod repellendus similique
            veritatis voluptates? Adipisci aperiam autem cupiditate laudantium officiis? Accusamus at, eaque earum
            fugiat harum quasi quidem quo unde.
        </div>
        <div>Alias at aut commodi cumque laudantium nulla. Aspernatur debitis exercitationem ipsum quaerat quasi! A
            commodi doloremque esse hic minus non odio quas repellat vitae voluptas? Earum hic incidunt nemo qui?
        </div>
        <div>Accusantium adipisci at atque deserunt dolores ducimus enim eos ex excepturi facere harum iste laboriosam
            molestiae non officiis pariatur quo repellat sapiente sequi, sint soluta totam unde vitae voluptatem
            voluptatum.
        </div>
        <div>Architecto, atque beatae commodi cum, cumque dolore earum eveniet excepturi expedita explicabo laboriosam
            maiores nam nemo praesentium quod sapiente similique. Culpa cumque cupiditate dolores harum laboriosam optio
            perferendis, possimus voluptas.
        </div>
        <div>Amet consectetur dolorum explicabo ipsa quibusdam repellat ullam. Ab animi aperiam, est non quasi quibusdam
            sit unde. Assumenda at atque fuga, impedit in laborum minus ratione temporibus vel, vero voluptatibus?
        </div>
        <div>Cum minima obcaecati odio provident sit soluta totam vitae. Asperiores minus numquam odio officiis
            perferendis quae reprehenderit tenetur vel veniam. Cupiditate deserunt dolorem esse nesciunt non porro
            suscipit tempora. Voluptas.
        </div>
        <div>Consectetur, delectus earum ipsa mollitia nobis quasi reiciendis? At commodi, debitis dolores enim,
            explicabo numquam quas reiciendis sapiente suscipit vel velit voluptates! Deleniti dignissimos ea,
            exercitationem iure quia quidem tenetur.
        </div>
        <div>A aperiam dolores earum eius eligendi error est eum expedita explicabo, fugiat magnam minima modi neque
            odio placeat quae quas quasi quisquam ratione repellat sed sequi ullam, unde veniam voluptates.
        </div>
        <div>Assumenda atque, dolores esse facere illum incidunt pariatur perferendis quo saepe soluta. At, commodi
            earum esse explicabo fugiat, harum hic iste mollitia nisi nulla quam quasi quis totam voluptates voluptatum.
        </div>
        <div>Asperiores culpa error facere itaque necessitatibus nisi quibusdam quis repellendus velit! Aperiam aut
            commodi deserunt dolorum fuga illo ipsam odit pariatur ut veritatis. Cumque natus obcaecati officiis qui
            saepe tenetur.
        </div>
        <div>Aliquam animi atque corporis, cum cumque distinctio eius explicabo facilis illo incidunt ipsum laudantium
            maxime molestiae molestias necessitatibus nemo nostrum obcaecati perferendis quia repellat repudiandae
            sapiente sequi sint ut vel.
        </div>
        <div>Aperiam asperiores at eos eveniet hic illum labore numquam optio quae voluptas. Animi beatae cum doloremque
            eligendi esse, eum laboriosam maxime natus non quae quo quod rerum temporibus ullam veniam.
        </div>
        <div>A amet autem blanditiis dolor ducimus eaque est et fugiat illum laborum laudantium maxime minima modi nam
            optio ratione reiciendis sapiente suscipit unde veniam vero vitae, voluptatibus. Architecto, est, ex.
        </div>
        <div>Commodi cumque dolore modi molestias recusandae. Amet, assumenda debitis earum esse impedit inventore
            laborum nihil omnis perferendis quis, quisquam similique totam. Accusamus aut eius mollitia officia officiis
            voluptatem! Ipsum, rem.
        </div>
        <div>Ipsum, magnam quas! Aliquid assumenda, atque corporis eaque, earum eligendi explicabo nisi nostrum
            perspiciatis quasi quisquam recusandae rem soluta temporibus ullam. At beatae fuga illo in, labore modi
            mollitia quisquam.
        </div>
        <div>A adipisci dignissimos dolore doloribus eligendi eveniet excepturi fuga placeat, similique sit? Accusantium
            delectus dolor harum illo labore molestiae obcaecati omnis repellendus sint voluptatum! Ducimus quis ratione
            sint tempora ullam?
        </div>
        <div>Ad animi consequuntur ipsam iure magnam molestiae nemo perferendis recusandae sint! A aliquam aut cum
            cumque cupiditate dolorem eveniet expedita ipsum, maiores rerum. Cupiditate ea earum laborum, mollitia
            pariatur quod?
        </div>
        <div>Adipisci eligendi error esse et eum neque nobis quod reprehenderit tempore voluptatem! At cupiditate
            dignissimos eveniet fuga, in, maiores minus necessitatibus pariatur praesentium quaerat similique sint
            voluptas. Consequatur, cumque, quibusdam.
        </div>
        <div>Aspernatur cupiditate dolore enim fugiat harum illo, in ipsam iusto labore laboriosam magni mollitia natus
            perferendis quidem quis recusandae sapiente sequi sint velit vero? Blanditiis esse molestias nesciunt vero
            voluptate.
        </div>
        <div>Ad eius ex laudantium molestias nisi non veniam. Consequuntur eaque earum enim error esse ex fugit impedit
            inventore ipsum iusto nostrum officiis, omnis perferendis quae quam qui quos, vitae voluptatibus?
        </div>
        <div>Corporis doloribus eum iure quas tenetur! Ex iste iusto odit, optio sint temporibus? Ab aliquam aperiam
            assumenda beatae, consequuntur dolorum ducimus, error, eum ipsum nihil nisi numquam odio similique suscipit.
        </div>
        <div>Commodi dolore doloremque eaque earum eveniet nam necessitatibus nemo neque odit pariatur perspiciatis
            placeat possimus praesentium, quis, repellendus sint, sunt suscipit unde. Dolorem doloremque doloribus
            facere in laudantium nostrum odit?
        </div>
        <div>Aliquam aliquid dignissimos facilis optio rerum! Animi, aspernatur autem consectetur cumque debitis eius
            eveniet explicabo, facilis harum maxime necessitatibus nesciunt nisi quia quo quos sequi soluta temporibus
            totam. Eveniet, nobis.
        </div>
        <div>Accusantium consequuntur culpa cum dolorem doloribus dolorum esse et excepturi hic ipsa, iste laudantium
            libero minima molestias necessitatibus odio omnis porro quia quisquam quos sequi unde velit voluptatum.
            Laboriosam, vel!
        </div>
        <div>Culpa dolores doloribus illum labore modi! Assumenda at dignissimos, dolore fugiat hic ipsam ipsum itaque
            laboriosam magnam, minus molestias nemo recusandae repudiandae sed totam voluptate voluptatibus. Eligendi
            iste quibusdam soluta!
        </div>
        <div>Eveniet porro quasi quis recusandae soluta unde. Beatae debitis dignissimos enim est et laudantium magni
            maiores minima mollitia, nobis perspiciatis quibusdam quod sed tempora tempore! Neque, optio quos!
            Architecto, dignissimos!
        </div>
        <div>Amet animi asperiores at consequuntur corporis cum delectus dolores doloribus eum facere illo illum, iste
            maxime, necessitatibus nemo odio officia optio placeat quisquam quo rerum saepe sapiente veniam voluptas
            voluptates.
        </div>
        <div>Accusantium commodi consectetur dolores expedita harum labore minus natus porro quasi ratione reiciendis,
            sunt suscipit totam, ut vero! Est inventore modi nam perferendis porro qui quia sit temporibus ut,
            voluptatibus.
        </div>
        <div>Cumque debitis deserunt dignissimos, iure nesciunt nobis odit recusandae repudiandae velit voluptates!
            Adipisci animi aspernatur, aut culpa dolorem error exercitationem fugiat impedit neque nesciunt non quo,
            reprehenderit sapiente similique, tenetur.
        </div>
        <div>Consequatur dolore maiores, natus praesentium reprehenderit voluptatum! Enim eum illo in quidem
            repudiandae. Alias beatae dolor eius inventore necessitatibus odit temporibus. Hic magnam molestiae nisi
            numquam praesentium qui quidem quis?
        </div>
        <div>Alias asperiores consequatur cupiditate deleniti dicta dolores, dolorum eveniet fuga ipsam iusto labore
            nostrum odio officia porro, praesentium quam quasi quia quibusdam, rem sequi sint temporibus unde
            voluptatum. Cum, porro?
        </div>
        <div>Aliquam aperiam assumenda culpa deserunt dolorem eius eligendi, enim est facere inventore modi molestiae
            molestias natus nobis obcaecati pariatur porro praesentium quidem reiciendis sunt suscipit veniam voluptate.
            Error laboriosam, voluptas.
        </div>
        <div>Culpa cumque deleniti exercitationem explicabo nostrum quaerat quos velit. A commodi enim expedita ipsa
            itaque laudantium, natus nemo nisi nostrum numquam perferendis porro quis quo recusandae soluta temporibus
            ullam ut.
        </div>
        <div>Eaque, eum impedit itaque obcaecati recusandae repudiandae sed veritatis. Beatae eaque, earum ex expedita
            harum illo minima mollitia necessitatibus neque, possimus ratione repudiandae sequi sint soluta vero!
            Asperiores eaque, ipsam!
        </div>
        <div>Accusamus accusantium aperiam asperiores aspernatur consequatur delectus dolore dolorem ducimus eaque earum
            error inventore itaque, laboriosam quas quis ratione repellat repellendus sequi vel voluptates! Asperiores
            maxime nobis suscipit voluptate voluptatum?
        </div>
        <div>Quibusdam sint sit voluptatum. Alias consequatur doloremque enim fugit itaque laborum, molestiae non
            officia reiciendis suscipit. Exercitationem harum ratione tempora unde ut. Blanditiis consequatur dolorem ea
            excepturi facilis, quod rem?
        </div>
        <div>Culpa dolor explicabo hic impedit, maxime minus nesciunt nostrum, quaerat reiciendis sapiente veritatis
            voluptas voluptatum. Autem beatae cumque eveniet explicabo facilis fuga in, incidunt modi porro quas quos
            recusandae tenetur!
        </div>
        <div>Asperiores doloribus ex id, magnam maiores minus molestias odio optio sit! Aliquid, amet dicta ea enim est,
            impedit nemo nostrum numquam officiis perferendis placeat possimus quisquam quos repellat tenetur velit?
        </div>
        <div>Ab consequuntur dignissimos distinctio dolor dolore, ducimus earum eligendi enim error excepturi facere in
            incidunt ipsam iste maiores, maxime, minima nisi nostrum quam quia quidem repellat tempora unde velit
            veritatis.
        </div>
        <div>Amet animi, aspernatur atque consequuntur culpa ducimus et eum facilis labore laboriosam magnam nam natus,
            nemo neque nesciunt numquam odio optio quam qui quos sunt tempore totam unde. Obcaecati, perspiciatis.
        </div>
        <div>Adipisci corporis, dolorem enim fugit ipsam iste quisquam veritatis. A adipisci beatae cumque doloribus
            hic, impedit ipsa, iure maiores modi nihil nisi nulla perferendis placeat porro possimus, quidem sed ut?
        </div>
        <div>Aliquam blanditiis consequatur corporis laboriosam necessitatibus omnis repudiandae soluta temporibus.
            Adipisci animi at cumque, distinctio esse ex harum id molestiae necessitatibus perferendis perspiciatis
            quia, quis quos sit soluta unde voluptatum!
        </div>
        <div>Adipisci distinctio error explicabo nihil rerum? Ab ad architecto consectetur corporis, deserunt dolorem
            dolorum eligendi et excepturi natus nemo neque quo quod, reiciendis sint, veniam voluptatem! Est illum
            minima sit!
        </div>
        <div>A architecto consectetur consequuntur culpa cum delectus dolorum eaque laborum modi nostrum sequi sit,
            temporibus. Assumenda atque beatae consectetur culpa cum, eveniet, excepturi incidunt labore nulla obcaecati
            officia officiis perferendis!
        </div>
        <div>Atque, quidem, repellat. Blanditiis eaque id illo ipsam labore magni praesentium quaerat quisquam soluta
            sunt. Alias dolore dolorum error et exercitationem, facere fugit incidunt laborum magnam, possimus
            praesentium repellendus sunt!
        </div>
        <div>Aspernatur dolorem doloremque eum fugit minus nobis odit quisquam sequi, sit? Asperiores assumenda
            cupiditate dignissimos, dolor dolores, eius eveniet itaque laudantium mollitia nemo omnis quas quis quos
            rem, sed sint?
        </div>
        <div>Accusantium adipisci amet asperiores assumenda autem dolor dolorem doloremque eligendi et eveniet
            exercitationem, explicabo fugiat incidunt laborum nisi officia perferendis quae quaerat quasi qui quidem
            quisquam, quo similique ut vero!
        </div>
        <div>Ab aliquam animi architecto beatae corporis, cumque doloribus ipsa magni, maxime molestiae nobis omnis
            optio possimus praesentium quidem quos sint soluta unde veritatis vero! A odit ratione reiciendis sed! Quas?
        </div>
        <div>Architecto, debitis dolore impedit itaque libero natus nesciunt officia quia quis quos reprehenderit rerum
            voluptate voluptatem. Aliquid beatae blanditiis cupiditate inventore laudantium natus nemo quo vel voluptate
            voluptates. Fugiat, velit?
        </div>
        <div>Soluta, totam, veniam? Aliquid et eum hic inventore ipsam iure natus, nesciunt pariatur quae saepe sed
            similique tempora! Atque delectus, dignissimos ipsa magnam maiores omnis pariatur perferendis quis quod
            ullam.
        </div>
        <div>Adipisci, officiis veritatis? Consectetur laudantium modi numquam odio totam. Ad adipisci alias aliquam
            amet consequuntur culpa delectus ea excepturi, facere fugiat incidunt labore laboriosam mollitia, nemo
            praesentium quia, quibusdam voluptate.
        </div>
        <div>Adipisci cupiditate earum eos eum ipsum nostrum obcaecati, porro qui. Ab alias dolorem, doloremque eius
            eligendi facere id laboriosam maxime minima necessitatibus odio omnis quisquam rem repellendus sed veniam
            voluptates.
        </div>
        <div>Hic molestias quis quod ratione repellat vel vitae. Assumenda corporis eos laborum temporibus? Accusantium
            blanditiis consequatur, ducimus fugiat perspiciatis possimus quidem? Aspernatur assumenda, dignissimos eos
            error iste omnis reprehenderit soluta!
        </div>
        <div>Deserunt eaque eum facilis fuga iste nesciunt nobis numquam sunt ut vitae! Ad atque commodi dicta eum iste,
            iure natus placeat porro sunt voluptas! Enim expedita numquam sed sint vel?
        </div>
    </div>


</body>
</html>